<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>

</template>
<script>
  import {ref,customRef} from 'vue'
  export default {
    name: 'App',
    setup(){
      //自定义的ref--myRef
      function myRef(val,delay){
        let timer;
        return customRef((track, trigger)=>{
          return {
            get(){
              track()//通知vue去追踪keyword的改变
              return val;
            },
            set(newVal){
              console.log(newVal,track, trigger)
              clearTimeout(timer)
              timer =setTimeout(()=>{
                val = newVal
                trigger()//通知vue去重新解析模版
              },delay)

            }
          }
        })


      }
      // 使用vue提供的ref
      // let keyword=ref('hello')
      //使用程序员自定义的ref
      let keyword= myRef('hello',500)
      return {
        keyword
      }
    }



  }
</script>


